<template>
    <div style="height: 100%; width: 100%; position: relative">
        <div class="pagetop">
            <template>
                <div style="width: 100%">
                    <table style="width: 100%">
                        <tr>
                            <td>
                                <table style="font-size: 12px" class="table1style">
                                    <tr>
                                        <td>送出时间</td>
                                        <td colspan="2">
                                            <el-date-picker v-model="outdt" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"> </el-date-picker>
                                        </td>
                                        <td>状态</td>
                                        <td>
                                            <el-select v-model="outstat" clearable>
                                                <el-option label="送出" value="1"></el-option>
                                                <el-option label="送出数据同步" value="15"></el-option>
                                                <el-option label="对方已接收标本" value="2"></el-option>
                                                <el-option label="结果完成" value="4"></el-option>
                                                <el-option label="结果回传当前LIS" value="45"></el-option>
                                                <el-option label="标本剔回" value="8"></el-option>
                                            </el-select>
                                        </td>
                                        <td>分单类别</td>
                                        <td>
                                            <el-select v-model="groupval" clearable>
                                                <el-option v-for="item in grouplist" :key="item.req_groupid" :label="item.req_groupname" :value="item.req_groupid"> </el-option>
                                            </el-select>
                                        </td>
                                        <td>外送用户</td>
                                        <td>
                                            <rm-ddl-common datatype="userinfo" dataname="外送用户" v-model="outuser" width="160px" @change="userchange"></rm-ddl-common>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <el-checkbox v-model="outfail">送回失败</el-checkbox>
                                        </td>
                                        <td>
                                            <el-checkbox v-model="refail">回传失败</el-checkbox>
                                        </td>
                                        <td>条码号</td>
                                        <td>
                                            <el-input v-model="barcode"></el-input>
                                        </td>
                                        <td>目标医院</td>
                                        <td>
                                            <rm-ddl-common datatype="hospital" dataname="医院" v-model="hospval" width="100%" @change="hospchange"></rm-ddl-common>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right">
                                <table style="width: 100%; height: 100%; text-align: right">
                                    <tr>
                                        <td>
                                            <el-button type="primary" @click="Query()" icon="el-icon-search">查询</el-button>
                                            <el-button @click="cancelsendout()" icon="el-icon-back">取消外送</el-button>
                                            <el-button @click="listprint(1)" icon="el-icon-printer">打印</el-button>
                                            <!-- <el-button @click="listprint(2)" icon="el-icon-printer">预览</el-button> -->
                                            <el-button @click="listprint(3)" v-if="$tool.getSession(this.$tool.loginuserno) == 'admin'" icon="el-icon-printer">调整</el-button>
                                             <el-button @click="btnExport()"   icon="el-icon-upload2">导出</el-button>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </template>
        </div>
        <div class="pagecenter">
            <div class="middle-left">
                <vxe-table :data.sync="OutStaData" :loading="loadingSta" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" @current-change="currentChangeEvent" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow ref="statable" resizable size="mini" show-header-overflow show-overflow="ellipsis" :keyboard-config="keyConfig">
                    <vxe-table-column :field="item.field" :title="item.title" :width="item.width" :key="item.field" v-for="item in OutStaColumn"></vxe-table-column>
                </vxe-table>
            </div>
            <div class="middle-center" style="height: 100%">
                <vxe-table :data.sync="OutDataS" :loading="loadingOut" :select-config="{ reserve: true }" :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row highlight-hover-column highlight-hover-row how-header-overflow resizable size="mini" show-header-overflow show-overflow="ellipsis" :keyboard-config="keyConfig" ref="xTable" @current-change="currentOutDataSChangeEvent">
                    <vxe-table-column :field="item.field" :title="item.title" :width="item.width" :key="item.field" v-for="item in OutColumn"></vxe-table-column>
                </vxe-table>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false" :visible.sync="dialogSendUserVisible" title="选择运送人" class="logmodeldialog" :destroy-on-close="true">
            <el-container>
                <!-- <el-header height="30px">请选择或输入运送人
                </el-header> -->
                <el-main>
                    <!-- <el-select v-model="senduser" filterable allow-create>
                        <el-option v-for="item in sendusers" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select> -->
                    <el-autocomplete class="inline-input" style="width: 100%" v-model="senduser" :fetch-suggestions="showsendusers" placeholder="请选择或输入运送人"></el-autocomplete>
                </el-main>
                <el-footer style="text-align: right">
                    <el-button @click="printExec">确定</el-button>
                    <el-button @click="clearHistory">清除输入历史</el-button>
                </el-footer>
            </el-container>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" :visible.sync="dialogPreviewVisible" title="预览" :destroy-on-close="true">
            <div style="height: 800px; width: 100%; text-align: center; border: 1px solid #ccc; overflow: auto" v-loading="rightloading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                <!-- <div v-html="htmlstr"></div> -->
                <embed :src="htmlstr" type="application/pdf" width="100%" height="99%" :key="htmlstrkey" />
                <!-- <pdf v-for="i in pdfPages" :key="i" :src="url" :page="i"></pdf> -->
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
// import pdf from "vue-pdf";
import XEUtils from "xe-utils";
export default {
    // components: {
    //     pdf,
    // },
    name: "LIS225",
    data() {
        return {
            keyConfig: {
                isDel: true,
                isTab: true,
                isEdit: true,
                isArrow: true,
            },
            outdt: [],
            Now: [],
            outfail: false,
            refail: false,
            outstat: "",
            hosplist: [],
            hospval: "",
            hospname: "",
            grouplist: [],
            groupval: "",
            barcode: "",
            loadingOut: false,
            loadingSta: false,
            OutData: [],
            OutDataS: [],
            OutStaData: [],
            OutColumn: [],
            OutStaColumn: [],
            reqoutstyleid: "5002",
            printer: "",
            dialogSendUserVisible: false,
            senduser: "",
            sendusers: [],
            printoper: 1,
            printbarcodes: "",
            outuser: "",
            outusername: "",
            dialogPreviewVisible: false,
            // pdfPages: 1,
            // url: "",
            // vuePdf: "",
            htmlstr: "",
            htmlstrkey: 0,
            rightloading: true,
            printdesthospital: "",
            printoutdate: "",
            printoutids: "",
            selrow: "",
            cancelrow: "",
        };
    },
    created() {
        // this.vuePdf = require("vue-pdf");
        this.InitPageData();
    },
    mounted() {},
    updated() {},
    methods: {
        InitPageData() {
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS225",
                    method: "post",
                    data: {
                        action: "InitData",
                    },
                })
                .then((res) => {
                    this.outdt = [res.Now1, res.Now2];
                    this.OutColumn = res.RData1.Cols;
                    this.OutStaColumn = res.RData2.Cols;
                    this.grouplist = res.grouplist;
                    this.hosplist = res.hosplist;
                    this.reqoutstyleid = res.reqoutstyleid;
                    this.printer = res.printer;
                    this.outuser = localStorage.getItem("LIS225OUTUSER");
                });
        },
        Query() {
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS225",
                    method: "post",
                    data: {
                        action: "queryoutdata",
                        outdt1: this.outdt[0],
                        outdt2: this.outdt[1],
                        reqgroup: this.groupval,
                        outstat: this.outstat,
                        barcode: this.barcode,
                        desthosp: this.hospval,
                        outfail: this.outfail ? "1" : "0",
                        refail: this.refail ? "1" : "0",
                        outuser: this.outuser,
                    },
                })
                .then((res) => {
                    this.OutData = res.RightData;
                    this.OutDataS = res.RightData;
                    this.OutStaData = [{ out_dt: "全部", num: res.length }];
                    for (let i = 0; i < res.LeftData.length; i++) {
                        this.OutStaData.push(res.LeftData[i]);
                    }
                    this.$nextTick(() => {
                        this.selrow = this.$refs.statable.getTableData().fullData[0];
                        this.$refs.statable.setCurrentRow(this.$refs.statable.getTableData().fullData[0]);
                    });
                    if (!!this.outuser) {
                        localStorage.setItem("LIS225OUTUSER", this.outuser);
                    }
                });
        },
        currentChangeEvent({ row }) {
            if (row.out_dt == "全部") {
                this.OutDataS = this.OutData;
            } else {
                this.OutDataS = this.OutData.filter((item) => item.out_dt == row.out_dt);
            }
        },
        currentOutDataSChangeEvent({ row }) {
            this.cancelrow = row;
        },
        // 取消外送
        cancelsendout() {
            if (this.cancelrow != "") {
                this.$confirm("确定取消【" + this.cancelrow.barcode + "_" + this.cancelrow.pat_name + "_" + this.cancelrow.sample_items + " 】外送吗？", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$tool
                            .request({
                                url: "LIS/LIS2/LIS225",
                                method: "post",
                                data: {
                                    action: "cancelsendout",
                                    outid: this.cancelrow.outid,
                                    barcode: this.cancelrow.barcode,
                                },
                            })
                            .then((res) => {
                                if (res.flag == "1") {
                                    this.$message.success("取消外送成功！");

                                    this.OutDataS.forEach((element) => {
                                        if (element.outid == this.cancelrow.outid) {
                                            this.$refs.xTable.remove(element);
                                        }
                                    });
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                            .catch((e) => {
                                console.log("error", e);
                            });
                    })
                    .catch((e) => {});
            } else {
                this.$message.warning("请选择要取消外送的数据！");
            }
        },
        clearHistory() {
            localStorage.removeItem("ReqOutSendUser");
        },
        showsendusers(queryString, cb) {
            var restaurants = this.sendusers;
            var results = restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        listprint(otype) {
            var barcodes = "";
            var outids = "";
            this.OutDataS.forEach((t) => {
                if (barcodes == "") {
                    barcodes = t.barcode;
                } else {
                    barcodes = barcodes + "$" + t.barcode;
                }
                if (outids == "") {
                    outids = t.outid;
                } else {
                    outids = outids + "$" + t.outid;
                }
            });
            if (otype == 1 || otype == 2) {
                this.printoper = otype;
                this.sendusers = [];
                var local = localStorage.getItem("ReqOutSendUser");
                if (!!local) {
                    this.sendusers = JSON.parse(local);
                }
                if (this.sendusers.length > 0) {
                    this.senduser = this.sendusers[0].value;
                }

                this.printbarcodes = barcodes;
                this.printoutids = outids;
                this.dialogSendUserVisible = true;
            } else {
                if (!barcodes) {
                    barcodes = "design";
                }
                var sql = "";
                //this.$pub.printlistbill(this, "SP_Print_ReqOut 'design','管理员',''", "3", this.reqoutstyleid, "外送清单", "");
                var sql = "SP_Print_ReqOut 'barcodes:design','senduser:admin','outids:'";
                this.$pub.printlistbill(this, sql, "3", this.reqoutstyleid, "外送清单", this.printer);
            }
        },
        printExec() {
            var f = this.sendusers.filter((t) => t.value == this.senduser);
            if (f && f.length > 0) {
            } else {
                this.sendusers.splice(0, 0, { value: this.senduser });
                localStorage.setItem("ReqOutSendUser", JSON.stringify(this.sendusers));
            }

            var sql = "";
            sql = "SP_Print_ReqOut 'barcodes:" + this.printbarcodes + "','senduser:" + this.senduser + "','outids:" + this.printoutids + "'";
            console.info(sql);
            this.$pub.printlistbill(this, sql, this.printoper, this.reqoutstyleid, "外送清单", this.printer);
        },
        // prePDFDialogShow(url) {
        //     this.url = pdf.createLoadingTask(url);
        //     this.url.promise.then((pdf) => {
        //         this.pdfPages = pdf.numPages;
        //     });
        // },
        userchange(val, name) {
            this.outuser = val;
            this.outusername = name;
        },
        hospchange(val, name) {
            this.hospval = val;
            this.hospname = name;
        },
        btnExport(){
            var tableColumn = this.$refs.xTable.getColumns();
            var extableColumn = [];
            tableColumn.forEach(item => {
            extableColumn.push({ title: item.title, field: item.property });
            });
            let filtertxt = this.getExportFilter();
            this.$pub.exportTableExcel(this.OutDataS, extableColumn, "LIS225 标本外送信息明细.xlsx", filtertxt);
        },
        // 获取当前导出文件的所有查询条件
        getExportFilter() {
            let filtertxt = "送出时间:" + XEUtils.toDateString(this.outdt[0], "yyyy-MM-dd HH:mm:ss") + "至" + XEUtils.toDateString(this.outdt[1], "yyyy-MM-dd HH:mm:ss") + "; ";
            if(this.outstat) filtertxt += "状态:" + this.getOutstatname() + "; ";
            if(this.groupval) filtertxt += "分单类别:" + this.grouplist.filter((item) =>  this.groupval == item.req_groupid)[0].req_groupname + "; ";
            if(this.outuser) filtertxt += "外送用户:" + this.outusername + "; ";
            if(this.outfail) filtertxt += "送回失败; "
            if(this.refail) filtertxt += "回传失败; "
            if(this.barcode) filtertxt += "条码号:" + this.barcode + "; ";
            if(this.hospval) filtertxt += "目标医院:" + this.hospname + "; ";
            return filtertxt;
        },
        getOutstatname() {
            let name = "";
            switch(this.outstat) {
                case "1":
                    name="送出";
                    break;
                case "15":
                    name="送出数据同步"
                    break;
                case "2":
                    name="对方已接收标本"
                    break;
                case "4":
                    name="结果完成"
                    break;
                case "45":
                    name="结果回传当前LIS"
                    break;
                case "8":
                    name="标本剔回"
                    break;
            }
            return name;
        },
    },
};
</script>

<style scoped>
.pagetop {
    width: 100%;
    height: 105px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 110px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 405px;
    right: 0px;
    overflow: auto;
}
.middle-left {
    position: absolute;
    height: 100%;
    width: 400px;
    left: 0px;
    top: 0;
}
.poppagetop {
    width: 100%;
    height: 40px;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    position: absolute;
    border: 1px solid #ccc;
    z-index: 999;
}
.poppagecenter {
    position: absolute;
    top: 50px;
    width: 100%;
    left: 0;
}
.popmiddle-left {
    background-color: aqua;
    position: absolute;
    height: 450px;
    width: 480px;
    left: 0px;
    overflow: auto;
}
.popmiddle-center {
    position: absolute;
    -webkit-box-align: center;
    height: 100%;
    left: 485px;
    right: 485px;
}
.popmiddle-right {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 450px;
    width: 480px;
    right: 0px;
    border: 1px solid #ccc;
}
.table1style tr td {
    padding: 0px 2px 0px 5px;
    white-space: nowrap;
}
</style>